<template>
  <!-- 车品 - 我销售的车品订单详情 -->
  <view class="car-goods-detail">
    <view class="main-box">
      <!-- 状态 -->
      <view class="status-title flex flex-jc-sb flex-ai-c">
        <view class="status-box">
          <i-icon icon="icondingdandengdai" color="#333"></i-icon>
          <text class="text">{{ detailData.status | orderStatus }}</text>
        </view>

        <!-- 待付款的倒计时 -->
        <view v-if="detailData.status === 1" class="down-time">
          <text class="font-24">截止付款时间：</text>
          <u-count-down
            :show-days="false"
            color="#333"
            bg-color="#FBD220"
            font-size="32"
            :timestamp="detailData.surplustime"
          ></u-count-down>
        </view>
      </view>

      <!-- 购买人信息 -->
      <view class="buy-person-info">
        <view class="row">
          <text class="label color-999">购买主体：</text>
          <text class="value">{{ detailData.store_buy_name }}</text>
        </view>
        <view class="row">
          <text class="label color-999">联系人：</text>
          <text class="value">{{ detailData.receiver_name }}</text>
        </view>
        <view class="row">
          <text class="label color-999">联系电话：</text>
          <text class="value">{{ detailData.receiver_phone }}</text>
        </view>
        <view class="row">
          <text class="label color-999">收货地址：</text>
          <text class="value">{{ detailData.receiver_address }}</text>
        </view>
      </view>

      <!-- 录入物流信息 - 待发货需要显示操作 -->
      <view v-if="detailData.status === 2" class="set-logistics-info">
        <view class="title">录入物流信息</view>
        <view class="content">
          <u-field
            v-model="logisticsName"
            label="快递公司："
            placeholder="请选择快递公司"
            label-width="144"
            right-icon="arrow-down-fill"
            disabled
            class="row"
            placeholder-style="color: #999;"
            @click="showLogisticsCompanyList = true"
          >
          </u-field>
          <u-field
            v-model="logisticsNo"
            label="快递单号："
            placeholder="请输入快递单号"
            label-width="144"
            class="row"
            placeholder-style="color: #999;"
            :border-bottom="false"
          >
          </u-field>
        </view>
      </view>
      <!-- 弹出的物流快递公司 -->
      <logistics-company-list
        v-model="showLogisticsCompanyList"
        @change="getLogisticsName"
      ></logistics-company-list>

      <!-- 订单商品信息 -->
      <view class="order-goods-info">
        <!-- 头部分 - 店铺名称 -->
        <view class="top-title flex flex-ai-c" @click="goStorePage()">
          <view class="store-icon mr-14">
            <i-icon icon="icondianpu" color="#fbd220"></i-icon>
          </view>
          <view class="store-title mr-14">{{
            detailData.store_sell_name
          }}</view>
          <view class="store-icon">
            <i-icon icon="iconbao_1" color="#fbb000"></i-icon>
          </view>
        </view>

        <!-- 中间部分 - 商品信息 -->
        <view class="goods-list">
          <view
            v-for="(item, i) in detailData.list"
            :key="i"
            class="goods-info flex"
            @click="goGoodsPage(item)"
          >
            <view class="left-img">
              <image :src="item.car_supplies_pic_path" mode="widthFix"></image>
            </view>
            <view class="right-box">
              <view class="goods-title flex">
                <view class="text">{{ item.car_supplies_name }}</view>
                <!-- 右边价格和数量 -->
                <view class="right-price">
                  <view class="font-24">￥{{ item.price }}</view>
                  <view class="color-999 font-26">x{{ item.count }}</view>
                </view>
              </view>

              <view class="mt-20 font-24 flex flex-jc-fe">
                <text class="color-999">运费</text>
                <text class="color-333">￥{{ item.freight }}</text>
              </view>
            </view>
          </view>

          <!-- 价格部分 -->
          <view class="price-box flex flex-jc-fe flex-ai-c">
            <view class="row font-24 total-price">
              <text class="color-999">总价</text>
              <text class="color-333">￥{{ detailData.total_money }}</text>
            </view>
            <view class="row">
              <text class="font-24 color-999">实付款：</text>
              <text class="color-EB5B01 font-24 font-blod"
                >￥{{ detailData.actual_payment }}</text
              >
            </view>
          </view>
        </view>

        <!-- 底部部分 - 联系按钮 -->
        <view class="btn-contact flex flex-ai-c">
          <view class="btn" @click="contactSeller">
            <i-icon icon="iconxiaoxi1" type="multiple" class="icon-"></i-icon>
            <text>联系买家</text>
          </view>
          <view class="btn" @click="callUserMobile()">
            <i-icon icon="icondianhua" type="multiple" class="icon-"></i-icon>
            <text>致电买家</text>
          </view>
        </view>
      </view>

      <!-- 物流信息, 只有待收货和已完成才显示该部分 -->
      <view v-if="[3, 4].includes(detailData.status)" class="logistics-info">
        <view class="title">物流信息</view>
        <view class="content">
          <text class="color-999"
            >{{ detailData.logistics_company_name }}：</text
          >
          <text>{{ detailData.logistics_no }}</text>
          <u-tag
            text="复制"
            mode="dark"
            size="mini"
            bg-color="#FFF6CD"
            color="#666"
            class="ml-10 copyText"
            :data-clipboard-text="detailData.logistics_no"
            @click="copyText(detailData.logistics_no)"
          />
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="title">订单信息</view>
        <view class="content">
          <view class="row">
            <text class="label color-999">订单号：</text>
            <text class="value">{{ detailData.order_no }}</text>
            <u-tag
              text="复制"
              mode="dark"
              size="mini"
              bg-color="#FFF6CD"
              color="#666"
              class="ml-10 copyText"
              :data-clipboard-text="detailData.order_no"
              @click="copyText(detailData.order_no)"
            />
          </view>
          <view v-for="(item, i) in detailData.recordlist" :key="i" class="row">
            <text class="label color-999"
              >{{ item.operation_action | operationDate }}：</text
            >
            <text class="value font-26">{{
              item.addtime.replace(/T/, ' ')
            }}</text>
          </view>
          <!-- <view class="row">
            <text class="label color-999">付款时间：</text>
            <text class="value">2020-05-21  15：16：22</text>
          </view>
          <view class="row">
            <text class="label color-999">发货时间：</text>
            <text class="value">2020-05-21  15：16：22</text>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 固定在底部的操作按钮 -->
    <view class="btn-fixed">
      <!-- 待付款、待收货的按钮 -->
      <view
        v-if="[1, 3].includes(detailData.status)"
        class="btn-group flex flex-ai-c status-1-3"
      >
        <i-button
          icon="iconxiaoxi"
          text="联系买家"
          color="#FBD220"
          bg-color="#333"
          shape="circleLeft"
          class="btn"
          @click.native="contactSeller"
        ></i-button>
        <i-button
          icon="iconlianxi"
          text="致电买家"
          color="#333"
          shape="circleRight"
          class="btn"
          @click.native="callUserMobile()"
        ></i-button>
      </view>

      <!-- 待发货的按钮 -->
      <view
        v-if="detailData.status === 2"
        class="btn-group flex flex-ai-c status-2"
      >
        <i-button
          icon="iconxiaoxi"
          text="联系买家"
          color="#FBD220"
          bg-color="#333"
          shape="circleLeft"
          class="btn btn-small"
          @click.native="contactSeller"
        ></i-button>
        <i-button
          icon="iconwuliu"
          text="录入物流信息"
          color="#333"
          shape="circleRight"
          class="btn btn-big"
          @click.native="sendGoods()"
        ></i-button>
      </view>

      <!-- 已完成的按钮 -->
      <view
        v-if="detailData.status === 4"
        class="btn-group flex flex-ai-c status-4"
      >
        <view class="btn">
          <i-button shape="circleLeft" bg-color="#333" class="btn-cm">
            <i-icon icon="iconshanchu" color="#FBD220"></i-icon>
            <view class="text">删除订单</view>
          </i-button>

          <i-button
            bg-color="#333"
            class="btn-cm"
            @click.native="contactSeller"
          >
            <i-icon icon="iconxiaoxi" color="#FBD220"></i-icon>
            <view class="text">联系买家</view>
          </i-button>
        </view>

        <i-button
          icon="iconlianxi"
          text="致电买家"
          color="#333"
          shape="circleRight"
          class="btn"
          @click.native="callUserMobile()"
        ></i-button>
      </view>
    </view>

    <!--  -->
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'
import logisticsCompanyList from '@/components/logisticsCompanyList.vue'

export default {
  components: {
    iButton,
    logisticsCompanyList,
  },

  data() {
    return {
      orderId: '', // 订单id

      // 订单详情数据
      detailData: {
        id: '01',
        status: 0,
        store_buy_id: '655c78ba430f413cb1cc82e37588ffef',
        store_sell_id: 'a1b9f8c4728043458b8126399257bf6a',
        total_money: 10000001,
        actual_payment: 0,
        freight: 12,
        addtime: '2020-11-13T10:01:46',
        receiver_name: '车小7',
        receiver_phone: '123456789',
        receiver_address: '环球中心',
        order_no: '123',
        logistics_company_name: '顺丰',
        logistics_no: '123',
        store_sell_name: null,
        store_buy_name: '四川赚台车科技有限公司',
        store_sell_phone: '15983867351',
        surplustime: '86399',
        list: [],
        recordlist: [],
      },
      showLogisticsCompanyList: false, // 显示物流快递列表底部弹出框
      logisticsName: '', // 物流快递公司名称
      logisticsNo: '', // 物流快递单号
      pageFrom: '', //从哪里进入详情
    }
  },

  filters: {
    // 过滤订单状态的数字，返回状态文字
    orderStatus(status) {
      let statusList = [null, '待付款', '待发货', '待收货', '已完成']
      return statusList[status]
    },

    // 过滤订单操作时间
    operationDate(dateText) {
      let labals = {
        createDate: '创建时间',
        payDate: '付款时间',
        sendDate: '发货时间',
        endDate: '完成时间',
        cancelDate: '取消时间',
      }
      return labals[dateText]
    },
  },

  onLoad(option) {
    this.orderId = option.id
    this.pageFrom = option.pageFrom ? option.pageFrom : ''
  },

  created() {
    this.getOrderDetail()
  },

  mounted() {
    this.$copyText('.copyText')
  },

  methods: {
    // 获取车品订单详情
    async getOrderDetail() {
      uni.showLoading()
      try {
        const { data } = await this.$api.carGoodsOrder.OrderCarSuppliesDetails(
          this.orderId
        )
        this.detailData = data
        console.log('车品订单详情', data)
      } catch (err) {
        console.log(err)
      }
      uni.hideLoading()
    },

    // 选择获取快递公司
    getLogisticsName(name) {
      this.logisticsName = name
    },

    // 发货 - 点击录入物流信息
    async sendGoods() {
      if (this.logisticsName && this.logisticsNo) {
        try {
          let data = {
            id: this.orderId,
            storeid: this.$store.state.userInfoDetail.store.storeId,
            type: 0,
            name: this.logisticsName,
            number: this.logisticsNo,
          }
          const res = await this.$api.carGoodsOrder.OrderCarSuppliesOperate(
            data
          )
          console.log('车品订单发货', data)
          uni.showToast({ title: '发货成功' })
          // 返回到订单列表页面
          let t = setTimeout(() => {
            clearTimeout(t)
            uni.navigateBack({
              delta: 1,
            })
            uni.$emit('backChange', 3)
          }, 1000)
        } catch (err) {
          console.log(err)
        }
      } else {
        uni.showToast({
          title: !this.logisticsName ? '请选择快递公司' : '订单号不能为空',
          icon: 'none',
        })
      }
    },

    //联系买家
    contactSeller() {
      if (this.pageFrom === 'chat') {
        uni.navigateBack()
        return
      }
      let carPartDetailsStr = ''
      for (let i = 0; i < this.detailData.list.length; i++) {
        if (i > 4) {
          carPartDetailsStr = carPartDetailsStr + '...'
          break
        }
        carPartDetailsStr =
          carPartDetailsStr + this.detailData.list[i].car_supplies_name + ' '
      }
      this.$store.commit('news/createConversationActive', {
        user: this.detailData.store_buy_name, //店铺名称
        img: this.detailData.store_buy_topimg, //店铺头像
        lastTime: '', //
        userId: this.detailData.store_buy_id, //店铺id
        conversationID: 'C2C' + this.detailData.store_buy_id,
      })
      this.$store.commit('news/setCardInfo', {
        imgSrc: this.detailData.list[0].car_supplies_pic_path,
        name: carPartDetailsStr,
        price: this.detailData.total_money,
        type: 'carGoods',
      })
      uni.navigateTo({
        url:
          '/pages_news/contactSeller/contactSeller?user=' +
          this.detailData.store_buy_name +
          '&pageId=' +
          this.orderId +
          '&tab=0',
      })
    },

    // 致电买家
    callUserMobile() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.receiver_phone + '', //仅为示例
      })
    },

    // 点击店铺，跳转到店铺主页
    goStorePage() {
      uni.navigateTo({
        url: '/pages_common/store/store?id=' + this.detailData.store_buy_id,
      })
    },

    // 点击商品，跳转到商品详情页面
    goGoodsPage(item) {
      uni.navigateTo({
        url:
          '/pages_carGoods/carGoodsDetail/carGoodsDetail?id=' +
          item.car_supplies_id,
      })
    },

    // 复制
    copyText(text) {
      // #ifndef H5
      uni.setClipboardData({
        data: text + '',
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
@import './salesOrderDetail.scss';
</style>
